<template>
	<view class="page__bd">
		<view class="hb-bar bg-white solid-bottom">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>
				基本用法
			</view>
			<view class="action">
				<button class="hb-btn hb-btn_success shadow" @tap="basicsSteps">下一步</button>
			</view>
		</view>
		<view class="bg-white padding">
			<view class="hb-steps">
				<view class="hb-steps__item" :class="index>basics?'':'text-red'" v-for="(item,index) in basicsList" :key="index">
					<text :class="'hb-icon_' + item.icon"></text> {{item.name}}
				</view>
			</view>
		</view>
		<view class="bg-white padding margin-top-xs">
			<view class="hb-steps">
				<view class="hb-steps__item" :class="index>basics?'':'text-orange'" v-for="(item,index) in basicsList" :key="index">
					<text :class="index>basics?'hb-icon_title':'hb-icon_' + item.icon"></text> {{item.name}}
				</view>
			</view>
		</view>

		<view class="bg-white padding  margin-top-xs">
			<view class="hb-steps steps-arrow">
				<view class="hb-steps__item" :class="index>basics?'':'text-blue'" v-for="(item,index) in basicsList" :key="index">
					<text :class="'hb-icon_' + item.icon"></text> {{item.name}}
				</view>
			</view>
		</view>

		<view class="hb-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>
				数字完成
			</view>
			<view class="action">
				<button class="hb-btn hb-btn_success shadow" @tap="numSteps">下一步</button>
			</view>
		</view>
		<view class="bg-white padding">
			<view class="hb-steps">
				<view class="hb-steps__item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
					<text class="num" :class="index==2?'err':''" :data-index="index + 1"></text> {{item.name}}
				</view>
			</view>
		</view>

		<view class="hb-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>
				多级显示
			</view>
			<view class="action">
				<button class="hb-btn hb-btn_success shadow" @tap="scrollSteps">下一步</button>
			</view>
		</view>
		<view class="bg-white padding">
			<scroll-view scroll-x class="response hb-steps steps-bottom" :scroll-into-view="'scroll-' + scroll"
			 scroll-with-animation>
				<view class="hb-steps__item padding-lr-xl" :class="index>scroll?'':'text-blue'" v-for="(item,index) in 10" :key="index"
				 :id="'scroll-' + index">
					Level {{index + 1}} <text class="num" :data-index="index + 1"></text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "steps",
		data() {
			return {
				basics: 0,
				basicsList: [{
						icon: "roundsuccessfill",
						name: "开始"
					},
					{
						icon: "clock",
						name: "等待"
					},
					{
						icon: "roundsuccessfill",
						name: "完成"
					}
				],
				numList: [{
					name: '开始'
				}, {
					name: '等待'
				}, {
					name: '错误'
				}, {
					name: '完成'
				}, ],
				num: 0,
				scroll: 0
			}
		},
		methods: {
			basicsSteps() {
				this.basics = this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1
			},
			numSteps() {
				this.num = this.num == this.numList.length - 1 ? 0 : this.num + 1
			},
			scrollSteps() {
				this.scroll = this.scroll == 9 ? 0 : this.scroll + 1
			}
		}
	}
</script>

<style lang="less">

</style>
